<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>题目管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加题目</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 提示 -->
      <el-alert
        title="添加题目信息"
        type="info"
        center
        show-icon
        :closable="false"
      ></el-alert>

      <!-- 步骤条 -->
      <el-steps
        :space="200"
        :active="activeIndex - 0"
        finish-status="success"
        align-center
      >
        <el-step title="基本参数"></el-step>
        <el-step title="题目数据"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- Tab栏  -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        label-position="top"
      >
        <!-- Tab 栏切换会将切换tab的 name值赋值给 model -->
        <el-tabs
          v-model="activeIndex"
          :tab-position="'left'"
         
        >

        <el-tab-pane label="题目参数" name="0">
          <el-form-item label="题目名称:" prop="problemName">
            <el-input v-model="addForm.problemName"></el-input>
          </el-form-item>

          <el-form-item label="题目描述:" prop="problemDesc">
            <el-input
              :rows="3"
              type="textarea"
              v-model="addForm.problemDesc"
            ></el-input>
          </el-form-item>

          <el-form-item label="时间限制(MS):" prop="timeLimit">
            <el-input v-model="addForm.timeLimit"></el-input>
          </el-form-item>

          <el-form-item label="内存限制(KB)" prop="spaceLimit">
            <el-input v-model="addForm.spaceLimit"></el-input>
          </el-form-item>

          <el-form-item label="题目输入:" prop="problemInput">
            <el-input
              :rows="4"
              type="textarea"
              v-model="addForm.problemInput"
            ></el-input>
          </el-form-item>

          <el-form-item label="题目输出:" prop="problemOut">
            <el-input
              :rows="4"
              type="textarea"
              v-model="addForm.problemOut"
            ></el-input>
          </el-form-item>

          <el-form-item label="样例输入:" prop="sampleInput">
            <el-input
              :rows="4"
              type="textarea"
              v-model="addForm.sampleInput"
            ></el-input>
          </el-form-item>

          <el-form-item label="样例输出:" prop="sampleOutput">
            <el-input
              :rows="4"
              type="textarea"
              v-model="addForm.sampleOutput"
            ></el-input>
          </el-form-item>

          </el-tab-pane>

          

          <el-tab-pane label="题目数据" name="1">
           <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadURL"
            :on-success="handleSuccess"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>

          </el-tab-pane>

          <el-tab-pane label="完成" name="2">
            <!-- 富文本编辑器 -->
            <quill-editor v-model="addForm.goods_introduce"></quill-editor>
            <!-- 添加题目 -->
            <el-button type="primary" class="btnAdd" @click="addProblem"
              >添加题目</el-button
            >
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
        activeIndex: "0",
        // 添加题目表单
        addForm: {

        },
        // 上传文件地址:
        uploadURL: "http://192.168.163.158:8088/admin/upload/problemdata",

        // 图片上传组件的请求对象
        headerObj: {
            Authorization: window.sessionStorage.getItem("token")
        },
        addFormRules:{
            problemName: [
                { required: true, message: "请输入题目名称", trigger: "blur" },
                ],

                problemDesc: [
                { required: true, message: "请输入题目描述", trigger: "blur" },
                ],

                timeLimit: [
                { required: true, message: "请输入时间限制", trigger: "blur" },
                ],

                spaceLimit: [
                { required: true, message: "请输入内存限制", trigger: "blur" },
                ],

                problemInput: [
                { required: true, message: "请输入题目输入", trigger: "blur" },
                ],
                problemOut: [
                { required: true, message: "请输入题目输出", trigger: "blur" },
                ],
                sampleInput : [
                { required: true, message: "请输入样例输入", trigger: "blur" },
                ],
                sampleOutput: [
                { required: true, message: "请输入样例输出", trigger: "blur" },
                ],
        }
        
    };
  },
  methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleSuccess(response, file, fileList){

          if (response.meta.code === 200){
              this.$message.success("上传数据成功")
          }else {
              this.$message.error("上传数据失败!")
          }
         
      },

      addProblem(){
          this.$refs.addFormRef.validate(async valid => {
            const {data:res} = await this.$http.post("problem/save",this.addForm);
            if (res.meta.code !== 200 ){
                return this.$message.error('上传失败!')
            }

            this.$message.success("成功!");
            this.$router.push("/problems")
          })
      }

  }
};
</script>

<style></style>
